import React from "react";
import { Carousel } from "antd-mobile";
import "./style.css";
import { fmtUrl } from "../../utils";
import { getBanners, getNav, getGoods } from "../../service/home";

class HomePage extends React.Component {
  state = {
    bannerList: [],
    NavBar: [],
    goods: [],
  };
  componentDidMount() {
    getBanners().then((res) => {
      this.setState({
        bannerList: res.data,
      });
    });
    getNav().then((res) => {
      this.setState({
        NavBar: res.data,
      });
    });

    getGoods().then((res) => {
      this.setState({
        goods: res.data,
      });
    });
  }

  render() {
    const { bannerList, NavBar, goods } = this.state;
    return (
      <div>
        <div className="top-search">
          <div className="classfy-icon"></div>
          <div className="search-wrap">
            <i className="search-icon"></i>
            <input placeholder="请输入宝贝名称" />
          </div>
          <div className="login-wrap">
            <div className="login-text">登录</div>
          </div>
        </div>
        <div className="banner">
          <Carousel infinite autoplay>
            {bannerList.length > 0 &&
              bannerList.map((item, index) => {
                return (
                  <div className="banner-item" key={item.image}>
                    <img src={fmtUrl(item.image)} alt="" />
                  </div>
                );
              })}
          </Carousel>
        </div>
        <div className="nav">
          {NavBar.length > 0 &&
            NavBar.map((item, index) => {
              return (
                <div className="nav-item" key={item.cid}>
                  <img src={fmtUrl(item.image)} alt="" />
                  <p>{item.title}</p>
                </div>
              );
            })}
        </div>
        <div className="goods-level">
          {goods.length > 0 &&
            goods.map((item, index) => {
              return (
                <div className="goods-item" key={item.title}>
                  <div className="goods-title">{item.title}</div>
                  <div className="goods-center">
                    <div className="goods-left">
                      <h4>{item.items[0].title}</h4>
                      <div className="goods-detail">
                        <span className="text">精品打折</span>
                        <span className="price">{item.items[0].price}元</span>
                      </div>
                      <div className="image">
                        <img src={fmtUrl(item.items[0].image)} alt="" />
                      </div>
                    </div>
                    <div className="right">
                      
                    </div>
                  </div>
                  <div className="goods-bottom"></div>
                </div>
              );
            })}
        </div>
      </div>
    );
  }
}

export default HomePage;
